<template>
  <el-row :gutter="20" class="anime-list">
    <el-col
      v-for="oAnime in aAnimeDatas"
      :key="oAnime.iId"
      :xs="12"
      :sm="8"
      :md="6"
      :lg="4"
      :xl="3"
    >
      <div class="anime-item" @click="fnGoToDetail(oAnime.iId)">
        <el-image
          v-if="oAnime.sCoverImg"
          :src="oAnime.sCoverImg"
          :alt="oAnime.sName"
          fit="cover"
          class="anime-image"
        />
        <h3 class="anime-title">{{ oAnime.sName}}</h3>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 使用 defineProps 接收 props
const { aAnimeDatas } = defineProps({
  aAnimeDatas: {
    type: Array,
    required: true,
  },
});

// 定义 goToDetail 方法
const fnGoToDetail = (id) => {
  router.push({ name: 'AnimeDetail', params: { id } });
};
</script>

<style scoped>
.anime-list {
  margin-top: 20px;
}

.anime-item {
  cursor: pointer;
  text-align: center;
}

.anime-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

.anime-title {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>